<template>
  <div class="shoplist_container">
    <div class="recommend-wrapper">
      <div class="title">
        <h3>推荐商家</h3>
      </div>
      <van-loading color="#1989fa" class="loading" v-show="showLoading" />
      <div class="filter" :class="{isFixed: isFixed}">
        <ul>
          <li>
            <a href="#">
              <span>综合排序</span>
              <span class="iconfont arrow">&#xe771;</span>
            </a>
          </li>
          <li>
            <a href="#">
              <span>距离最近</span>
            </a>
          </li>
          <li>
            <a href="#">
              <span>销量最高</span>
            </a>
          </li>
          <li>
            <a href="#">
              <span>筛选</span>
              <span class="iconfont">&#xe7bb;</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="list" v-if="isLogined">
        <ul v-load-more="loaderMore" v-if="shopListArr.length">
          <router-link :to="{path: 'shop', query:{geohash, id: item.id}}" v-for="item in shopListArr" tag='li' :key="item.id">
            <div class="shop border-bottom">
              <div class="shop_item">
                <div class="shop_img">
                  <img :src="imgBaseUrl + item.image_path" class="shop_img">
                </div>
                <div class="shop_info">
                  <div class="row">
                    <h3><i content="品牌" class="brand"></i>{{item.name}}</h3>
                  </div>
                  <div class="row">
                    <div class="rate_wrapper">
                      <van-rate class="rating" v-model="item.rating" allow-half void-icon="star" size=".1rem" gutter=".15rem" void-color="#eee" />
                      <span class="rate">{{item.rating}}</span>
                      <span>月售{{item.recent_order_num}}单</span>
                    </div>
                    <div class="delivery_wrapper">
                      <span class="delivery" v-if="item.delivery_mode">{{item.delivery_mode.text}}</span>
                      <span class="zhunshi">准时达</span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="moneylimit">
                      <span>{{item.float_minimum_order_amount}}起送</span>
                      <span>{{item.piecewise_agent_fee.tips}}</span>
                    </div>
                    <div class="timedistanceWrap">
                      <span v-if="Number(item.distance)">{{item.distance > 1000? (item.distance/1000).toFixed(2) + 'km': item.distance + 'm'}}
                      </span>
                      <span>{{item.distance}}</span>
                      <span>{{item.order_lead_time}}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="column border-top">
                <div class="activities" v-for="(innerItem, index) of item.activities" :key="index">
                  <span class="icon">{{innerItem.icon_name}}</span>
                  <span class="desc">{{innerItem.description}}</span>
                </div>
              </div>
            </div>
          </router-link>
          <van-loading size="20px" color="#1989fa" class="loading" v-show="showBottomLoading">加载中...</van-loading>
        </ul>
        <ul v-else class="animation_opactiy">
          <li class="list_back_li" v-for="item in 10" :key="item">
            <img src="@/assets/images/shopback.svg" class="list_back_svg">
          </li>
        </ul>
        <p v-if="touchend" class="empty_data">更多商家接入中，敬请期待~</p>
      </div>
      <no-result v-else></no-result>
    </div>
    <aside class="return_top" @click="backTop" v-if="showBackStatus">
      <div class="back_top_svg">
        <span class="iconfont arrow">&#xe69e;</span>
      </div>
    </aside>
  </div>
</template>

<script>
import { Loading, Rate } from 'vant'
import { mapState, mapActions } from 'vuex'
import { showBack, animate } from '@/assets/js/mUtils'
import { loadMore } from '@/assets/js/mixin'
import NoResult from './NoResult'

export default {
  name: 'HomeRecommend',
  props: {
    geohash: String
  },
  components: {
    NoResult,
    [Loading.name]: Loading,
    [Rate.name]: Rate
  },
  data () {
    return {
      filter: 'filter',
      isFixed: false,
      value: 0,
      isLogined: false, // 是否登录
      offset: 0, // 批次加载店铺列表，每次加载20个 limit = 20
      shopListArr: [], // 店铺列表数据
      preventRepeatReuqest: false, // 到达底部加载数据，防止重复加载
      touchend: false, // 没有更多数据
      showLoading: true, // 显示加载动画
      showBottomLoading: true, // 显示底部加载动画
      showBackStatus: false, // 显示返回顶部按钮
      imgBaseUrl: 'https://elm.cangdu.org/img/'
    }
  },
  mixins: [loadMore],
  mounted () {
    // 获取用户信息
    this.getUserInfo()

    // 初始化数据
    this.initData()

    window.addEventListener('scroll', this.watchScroll)
  },
  computed: {
    ...mapState(['userInfo', 'latitude', 'longitude'])
  },
  methods: {
    ...mapActions(['getUserInfo']),

    initData () {
      if (this.userInfo && this.userInfo.user_id) {
        this.isLogined = true
      }

      // 获取数据
      this.$api.home.shopList(this.latitude, this.longitude, this.offset, this.restaurantCategoryId).then(res => {
        this.shopListArr = [...res.data]
        if (res.data.length < 20) {
          this.touchend = true
        }
        this.hideLoading()

        // 开始监听scrollTop的值，达到一定程度后显示返回顶部按钮
        showBack(status => {
          this.showBackStatus = status
        })
      })
    },

    // 到达底部加载更多数据
    loaderMore () {
      if (this.touchend) {
        return
      }
      // 防止重复请求
      if (this.preventRepeatReuqest) {
        return
      }
      this.showBottomLoading = true
      this.preventRepeatReuqest = true

      // 数据的定位加20位
      this.offset += 20
      this.$api.home.shopList(this.latitude, this.longitude, this.offset, this.restaurantCategoryId).then(res => {
        this.hideLoading()
        this.shopListArr = [...this.shopListArr, ...res.data]
        // 当获取数据小于20，说明没有更多数据，不需要再次请求数据
        if (res.length < 20) {
          this.touchend = true
          return
        }
        this.preventRepeatReuqest = false
      })
    },

    // 返回顶部
    backTop () {
      // animate(document.body, {scrollTop: 0}, 400, 'ease-out') document.body没有效果
      animate(document.documentElement, {scrollTop: 0}, 400, 'ease-out')
    },

    // 开发环境与编译环境loading隐藏方式不同
    hideLoading () {
      this.showLoading = false
      this.showBottomLoading = false
    },

    watchScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // 当滚动超过 200 时，实现吸顶效果
      if (scrollTop > 200) {
        this.isFixed = true
      } else {
        this.isFixed = false
      }
    }
  },
  watch: {
    userInfo (value) {
      this.initData()
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .title
    display: flex
    align-items: center
    justify-content: center
    height: 0.72rem
    font-size: 0.28rem
    color: #000
  .title:before, .title:after
    display: block
    content: ''
    width: 0.4rem
    display: block
    height: 0.01rem
    background-color: #999
  .title:before
    margin-right: 0.25rem
  .title:after
    margin-left: 0.25rem
  .filter
      padding: .2rem 0
    .isFixed
      position: fixed
      top: 1.02rem
      left: 0
      right: 0
      z-index: 999
      background: #fff
      box-shadow: 0 0 5px #ddd
    .filter ul
      display: flex
      flex-direction: row
      li
        width: 27%
        a
          display: flex
          flex-direction: row
          align-items: center
          justify-content: center
          font-size: .28rem
          .arrow
            font-size: 0.35rem
            transform: scale(0.4)
      li:nth-child(4)
        width: 19%
  .loading
    padding: .2rem 0
    text-align: center
  .list
    .shop
      padding: .3rem .2rem
      .shop_item
        display: flex
        flex-direction: row
        justify-content: space-between
        .shop_img
          width: 1.3rem
          height: 1.3rem
          overflow: hidden
          img
            width: 100%
        .shop_info
          flex: 1
          padding-left: .2rem
          font-size: .24rem
          display: flex
          flex-direction: column
          justify-content: space-between
          .row
            display: flex
            flex-direction: row
            justify-content: space-between
            h3
              width: 4.6rem
              color: #333
              font-size: .32rem
              line-height: .32rem
              font-weight: bold
              ellipsis()
              .brand
                position: relative
                margin-right: .7rem
                font-size: .3rem
                line-height: .3rem
                text-align: center
                white-space: nowrap
                &:after
                  display: inline-block
                  position: absolute
                  left: 0
                  top: 0
                  font-size: .4rem
                  font-weight: 700
                  content: attr(content)
                  padding: .2rem .2rem
                  color: #6f3f15
                  border-radius: .1rem
                  background-image: linear-gradient(-139deg,#fff100,#ffe339)
                  transform: scale(.5)
                  transform-origin: 0 0
            .rate_wrapper
              position: relative
              padding-left: 1.2rem
            .rate_wrapper .rating
              position: absolute
              top: .05rem
              left: 0
              transform: scale(.9)
              transform-origin: 0 0
            .delivery_wrapper span
              color: #fff
              display: inline-block
              transform: scale(0.8)
              padding: 0 .05rem
              border-radius: .05rem
              &.delivery
                margin-right: -0.2rem
                padding: .01rem .05rem
                background-image: linear-gradient(45deg,#0085ff,#0af)
              &.zhunshi
                color: #3190e8
                border: .01rem solid #3190e8
                margin-right: -0.1rem
            .moneylimit span:nth-child(1):after
              margin: 0 0 0 .08rem
              color: #ddd
              content: "|"
            .timedistanceWrap
              color: #999
            .timedistanceWrap span:nth-child(1):after
              margin: 0 0 0 .08rem
              color: #ddd
              content: "|"
      .column
        display: flex
        flex-direction: column
        margin: .15rem 0 0 1.5rem
        .activities
          position: relative
          line-height: .35rem
          padding: .15rem 0 0 .42rem
          .icon
            width: .65rem
            height: .65rem
            line-height: .65rem
            font-size: .42rem
            text-align: center
            color: #fff
            border-radius: .05rem
            display: inline-block
            transform: scale(.5)
            transform-origin: 0 0
            background-color: rgb(240, 115, 115)
            position: absolute
            left: 0
    .animation_opactiy .list_back_li
      .list_back_svg
        width: 100%
        height: 100%
    .empty_data
      text-align: center
      padding: .2rem 0
  .return_top
    position: fixed
    bottom: 1.5rem
    right: .35rem
    .back_top_svg
      width: .85rem
      height: .85rem
      line-height: .85rem
      text-align: center
      border-radius: 50%
      border: .01rem solid #ccc
      background: #fff
      .iconfont
        font-size: .42rem
        color: #aaa
</style>
